<template>
  <div class="qr-download-box">
    <div class="qr-title">扫码下载APP</div>
    <qrcode-vue :value="apkUrl" :size="180"/>
    <div class="download-link">
      <a :href="apkUrl" target="_blank">点击直接下载</a>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import QrcodeVue from 'qrcode.vue'
import httpUtil from "@/util/http.util";

const apkUrl = ref('') // 动态绑定二维码和链接

onMounted(async () => {
  try {
    const res = await httpUtil.get('/reward/generate-apk-link')
    apkUrl.value = location.origin + res.data.url // 使用后端生成的带签名 URL
  } catch (error) {
    console.error('获取下载链接失败', error)
  }
})

</script>

<style scoped>
.qr-download-box {
  padding: 16px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.qr-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

.download-link {
  margin-top: 10px;
}
</style>
